<template>
  <el-container style="margin-bottom: 10px">
    <el-main>
      <el-header class="header-class" height="22">
        <div class="header-text">Email Template List</div>
      </el-header>
      <div class="panel-border">
        <el-table border class="table" :data="templateList" style="width: 98%">
          <el-table-column label="#" type="index" width="40" :index="indexCalculate"></el-table-column>
          <el-table-column label="Template" width="140" prop="emailTempalteKey"></el-table-column>
          <el-table-column label="Description" width="140" prop="description"></el-table-column>
          <el-table-column label="From" prop="sendFrom" width="140"></el-table-column>
          <el-table-column label="To" prop="sendTo" width="140"></el-table-column>
          <el-table-column label="Subject" prop="subject"></el-table-column>
          <el-table-column label="Last Update At" prop="updatedAt" width="150"></el-table-column>
          <el-table-column label="Last Update By" prop="updatedBy.domainId" width="140"></el-table-column>
          <el-table-column label="Action" width="100">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">Edit</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-container>
          <div class="pagination">
            <el-pagination layout="prev, pager, next" :total="totalTemplate" :page-size="templateLimit"
              @current-change="onPageChange" :current-page="currentPage" >
            </el-pagination>
          </div>
        </el-container>
      </div>
      <el-dialog
        class="dialog"
        title="email template"
        :center="true"
        :top="'70px'"
        :visible.sync="dialogVisible"
        :fullscreen="true"
        >
        <email-template-edit-form ref="editForm"></email-template-edit-form>
        <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="onConfirm" class="edit_button">Update</el-button>
              <el-button type="danger" @click="onCancel">Cancle</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import emailTemplateService from '@/service/emailTemplate'
import EmailTemplateEditForm from './EmailTemplateEditForm'
import util from '@/common/js/util'
export default {
  components: {
    EmailTemplateEditForm
  },
  data() {
    return {
      templateList: [],
      totalTemplate: 0,
      templateLimit: 10,
      currentPage: 1,
      dialogVisible: false
    }
  },
  methods: {
    async getEmailTemplateList(currentPage, searchFilters) {
      let query = {
        searchFilters: searchFilters,
        page: currentPage,
        start: 0,
        limit: this.templateLimit
      }
      let result = await emailTemplateService.getEmailTemplatesWithQuery(query)
      this.templateList = result.data.content
      this.totalTemplate = result.data.totalElements
      this.currentPage = currentPage
    },
    handleEdit(index, row) {
      this.dialogVisible = true
      let emailTemplateObject = util.deepClone(row)
      this.$nextTick(() => {
        this.$refs['editForm'].setFormModel(emailTemplateObject)
      })
    },
    onPageChange(currentPage) {
      this.getEmailTemplateList(currentPage)
    },
    onCancel() {
      this.dialogVisible = false
    },
    async updateEmailTemplate(emailTemplate) {
      await emailTemplateService.updateEmailTemplate(emailTemplate)
    },
    onConfirm() {
      let emailTemplate = this.$refs['editForm'].getFormModel()
      let me = this
      this.$refs['editForm'].validateForm().then(async (valid) => {
        if (valid) {
          await me.updateEmailTemplate(emailTemplate)
          this.getEmailTemplateList(this.currentPage)
          this.dialogVisible = false
        }
      })
    },
    indexCalculate(index) {
      return (this.currentPage - 1) * this.templateLimit + index + 1
    }
  },
  mounted() {
    this.getEmailTemplateList(1)
  }

}
</script>

<style scoped lang="scss">
  @import './../../common/css/base.scss';

  .header-class {
    @include baseHeader(30px)
  }

  .header-text {
    color: #fff;
    padding-top: 5px;
    font-weight: bold;
  }

  .panel-border {
    border: 1px solid $base-header-color;
  }

  .table {
    margin: 15px;
  }

  .pagination {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

</style>
